<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>王郑毅的个人网站</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/large.css" media="screen and (min-width:1230px)" />
		<link rel="stylesheet" href="css/big.css" media="screen and (max-width:1230px)" />
		<link rel="stylesheet" href="css/medium.css" media="screen and (max-width:990px)" />
		<link rel="stylesheet" href="css/small.css" media="screen and (max-width:768px)" />
		<meta name="x5-orientation" content="portrait | landscape" />
		<meta name="screen-orientation" content="portrait">
		<meta name="x5-fullscreen" content="true" />
		<meta name="full-screen" content="yes">
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>

	<body>
		<div class="container-fiuld head">
			<div class="container-fiuld head-top col-sm-hid">
				<div class="container head-nav">
					<div class="head-nav-left">
						<a href="">
							<img src="img/logo.png" alt="" />
						</a>
					</div>
					<div class="header-nav-right">
						<ul>
							<li>
								<a href="">主页</a>
							</li>
							<li>
								<a href="">关于</a>
							</li>
							<li>
								<a href="">网页</a>
							</li>
							<li>
								<a href="">博客</a>
							</li>
							<li>
								<a href="">示例</a>
							</li>
							<li>
								<a href="">目录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="container-fiuld head-top-mobel">
				<div class="container-sm-90 ">
					<div class="head-nav-left">
						<a href="">
							<img src="img/logo-small.png" alt="" />
						</a>
					</div>
					<div class="header-nav-right">
						<a href="">
							<i class="iconfont icon-guanwang30icon24"></i>
						</a>
					</div>
				</div>
			</div>
			<div class="banner">
				<div class="banner-Zhezhao">
					<div class="container">
						<div class="banner-left col-sm-12 col-md-6 col-bg-6 col-lg-6">
							<div class="banner-left-middle container-sm-90">
								<h2 class="sm-center">欢迎来到
									<span>我的主页</span>
								</h2>
								<div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
								<a href="" class="btn sm-center">从这里开始</a>
							</div>
						</div>
						<div class="banner-right col-sm-hid col-md-6 col-bg-6 col-lg-6">
							<div class="vertical-middle">
								<img src="img/devices.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="body container">
				<div class="col-lg-4 col-bg-4 col-md-4 col-sm-12 body-first">
					<div>
						<i class="iconfont icon-link"></i>
					</div>
					<div class="body-first-title">Clean Design</div>
					<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less.</p>
						<div class="a-btn">
							<a href="" class="btn btn-body-more">阅读更多</a>
						</div>
					</div>
				<div class="col-lg-4 col-bg-4 col-md-4 col-sm-12 body-first">
					<div>
						<i class="iconfont icon-link"></i>
					</div>
					<div class="body-first-title">Clean Design</div>
					<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less.</p>
					<div class="a-btn">
							<a href="" class="btn btn-body-more">阅读更多</a>
						</div>
				</div>
				<div class="col-lg-4 col-bg-4 col-md-4 col-sm-12 body-first">
					<div>
						<i class="iconfont icon-link"></i>
					</div>
					<div class="body-first-title">Clean Design</div>
					<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less.</p>
					<div class="a-btn">
							<a href="" class="btn btn-body-more">阅读更多</a>
						</div>
				</div>
			</div>
			<div class="pictures container-fiuld">
				<div class="pictures container">
					<ul>
						<li class="col-lg-4 col-bg-4 col-md-4 col-sm-12">
							<a href="https://xiaoyierle.github.io/tmall/">
								<div class="up">
									<img src="img/project-02.jpg"/>
								</div>
								<div class="down">
									<div class="down-left">
										<span>查看我的作品</span>
										<span>天猫</span>
									</div>	
									<div class="down-right">
										<span>阅读量10<i class="iconfont icon-xin"></i></span>
										
									</div>
								</div>
							</a>	
						</li>
						<li class="col-lg-4 col-bg-4 col-md-4 col-sm-12">
							<a href="https://xiaoyierle.github.io/小米/">
								<div class="up">
									<img src="img/project-03.jpg"/>
								</div>
								<div class="down">
									<div class="down-left">
										<span>查看我的作品</span>
										<span>小米</span>
									</div>	
									<div class="down-right">
										<span>阅读量10<i class="iconfont icon-xin"></i></span>
										
									</div>
								</div>
							</a>
						</li>
						<li class="col-lg-4 col-bg-4 col-md-4 col-sm-12">
							<a href="https://xiaoyierle.github.io/apple/">
								<div class="up">
									<img src="img/project-04.jpg"/>
								</div>
								<div class="down">
									<div class="down-left">
										<span>查看我的作品</span>
										<span>苹果</span>
									</div>	
									<div class="down-right">
										<span>阅读量10<i class="iconfont icon-xin"></i></span>
										
									</div>
								</div>
							</a>
						</li>
						<li class="col-lg-4 col-bg-4 col-md-4 col-sm-12">
							<a href="https://xiaoyierle.github.io/uek/">
								<div class="up">
									<img src="img/project-05.jpg"/>
								</div>
								<div class="down">
									<div class="down-left">
										<span>查看我的作品</span>
										<span>优逸客</span>
									</div>	
									<div class="down-right">
										<span>阅读量10<i class="iconfont icon-xin"></i></span>
										
									</div>
								</div>
							</a>
						</li>
						<li class="col-lg-4 col-bg-4 col-md-4 col-sm-12">
							<a href="">
								<div class="up">
									<img src="img/project-06.jpg"/>
								</div>
								<div class="down">
									<div class="down-left">
										<span>查看我的主页</span>
										<span>个人主页</span>
									</div>	
									<div class="down-right">
										<span>阅读量10<i class="iconfont icon-xin"></i></span>
										
									</div>
								</div>
							</a>
						</li>
						<li class="col-lg-4 col-bg-4 col-md-4 col-sm-12">
							<a href="">
								<div class="up">
									<img src="img/project-01.jpg"/>
								</div>
								<div class="down">
									<div class="down-left">
										<span>查看我的作品</span>
										<span>更多</span>
									</div>	
									<div class="down-right">
										<span>阅读量10<i class="iconfont icon-xin"></i></span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
